//  想要成为什么样的人，就去做什么样的事

// 页面数据的数组
var data = [
    {
        imgUrl: 'like1.webp',
        title: '科沃斯全能扫地机器人扫地拖地吸尘三合一智能家用吸扫拖一体机X1',
        tag: ['百亿补贴', '包邮'],
        price: 2999,
        evaluate: '100',
        extra: '苏宁国际'
    },
    {
        imgUrl: 'like2.webp',
        title: '五个农民琥珀核桃仁500g罐装',
        tag: ['百亿补贴', '包邮'],
        price: 39,
        evaluate: '100',
        extra: null,
    },
    {
        imgUrl: 'like3.webp',
        title: '彩虹（Rainbow）电热暖手宝 TB24-18XG',
        tag: ['百亿补贴', '包邮'],
        price: 59,
        evaluate: '100',
        extra: '强哥国际'
    },
    {
        imgUrl: 'like4.webp',
        title: '华帝百得QE53燃气灶双灶家用天然气灶具液化气煤气灶台大火猛火灶炉具 （天然气）',
        tag: ['百亿补贴', '包邮'],
        price: 499,
        evaluate: '100',
        extra: null
    }
]


// 页面初始化的状态
window.onload = function () {

    // 创建对应的列数
    // 调用添加列的函数，并且吧cols函数得到的列数当做参数传递
    addUl(2)


    // 处理数据的函数
    processData(data)
}

// 添加列的函数
function addUl(num) {
    // 获取猜你喜欢的div
    var liekContent = document.getElementsByClassName('like-content')[0]

    var ul = document.createElement('ul')
    ul.id = 'water'

    // 循环列数创建对应数值的li标签
    for (var i = 0; i < num; i++) {
        var li = document.createElement('li')
        ul.appendChild(li)
    }

    // 将ul添加到liekContent中去
    liekContent.appendChild(ul)

}


// 处理数据写入的方法
function processData(data) {
    // console.log(data)

    // 获取ul对象，通过ul对象找到li子集
    var ul = document.getElementById('water')
    var lis = ul.children
    // console.log(lis)

    // 将图片依次写入到最短的li标签中
    for (var i = 0; i < data.length; i++) {
        var imgUrl = data[i].imgUrl

        // console.log(imgUrl)

        // 创建一个div，后续便于写入更多的数据
        var div = document.createElement('div')
        div.className = 'lis-details'
        // 把图片写入到div中去
        div.innerHTML = `
            <img src="../imgs/${imgUrl}"/>
            <p>${data[i].title}</p>
            <div class="tag">
                <span>${data[i].tag[0]}</span>
                <span>${data[i].tag[1]}</span>
            </div>
            <div class="price">
                <span><i>&yen;</i>${data[i].price}</span>
                <span>${data[i].evaluate}+评价</span>
            </div>
            <div class="extra">${data[i].extra != null ? data[i].extra : ''}</div>
        `

        // 将这个div添加到页面中,添加到最短的li标签里面
        var mask = -1
        console.log(lis[1].offsetHeight)
        // 每一张图片，都会执行li标签有几个，就执行几次下面的判断
        for (var j = 0; j < lis.length; j++) {

            // console.log(lis[1].offsetHeight);
            // 获取当前li标签高度
            var currentHeight = lis[j].offsetHeight;
            // console.log(currentHeight)

            // 判断当前li的高度，是否是最短的li标签

            // 第二次执行这个判断是，为当前li标签高度，和上一个li标签高度做比较。
            if (currentHeight < mask || mask == -1) {
                // alert(1)
                // 把当前的li高度赋值给mask
                mask = currentHeight

                // 将数据写入到最短的li中
                var sli = lis[j]

                // 将div移动到最短的li标签中
                // 因为js中对象不会凭空产生，如果操作的是同一个对象，那么添加时，做的是剪切操作
                sli.appendChild(div)

            }
        }


    }
}



// 滚动到下方时，自动更新数据
window.onscroll = function () {
    // 获取得到滚动剩余高度 = 文档高度 - 当前窗口高度 - 滚动条已滚动高度

    var dH = document.documentElement.scrollHeight; //文档高度
    var wH = document.documentElement.clientHeight; //窗口高度
    var sH = document.documentElement.scrollTop; //滚动条已滚动高度

    // 判断如果剩余滚动条高度小于200则重新请求数据
    if (dH - wH - sH < 200) {

        // 如果按正常功能效果执行。应该请求的是下一页的数据
        processData(data)

    }
}
